<template lang="pug">
.home_main_box.font
    navs
    .banner.m-auto.page-w(v-if="result.banner.length")
        slider(ref="slider", :options="options")
            slideritem(v-for="(item, index) in result.banner", :key="index") 
                img(:src="formattingImg(item.image)")
            //- div(slot="loading") 加载中。。。
        //- el-carousel(:autoplay="false", height='400' arrow="always")
            el-carousel-item(v-for="item in 4", :key="item")
                img(src='./../images/banner2.png')
    .box-list.m-auto.page-w.p-lr50
        .custom-title 榜单发布
        .list-box
            ul.tabs
                li.cursor(
                    v-for="n in tabList",
                    :key="n.val",
                    :class="{ on: currObj.onSeniority === n.val }",
                    @click="tabListFn(n.val)"
                ) {{ n.name }}
            div(style="min-height: 500px" v-loading='false')
                .detail-list(
                    v-if="currObj.onSeniority === 'trading' || (result.generalObj[currObj.onSeniority] && result.generalObj[currObj.onSeniority].organs.length)"
                )
                    .l
                        .myEcharts(ref="myEcharts", style="width: 100%; height: 500px")
                        p.descr 备案机构数量
                    ul.r 
                        template(
                            v-if="result.generalObj[currObj.onSeniority] && result.generalObj[currObj.onSeniority].organs.length"
                        )
                            li(
                                v-for="(item, i) in result.generalObj[currObj.onSeniority].organs.slice(0, 10)"
                            )
                                span {{ i + 1 }}
                                span {{ item.organName }}
                                span {{ item.score }}
                        template(v-else)
                            img( style="width:100%;padding-top:14px" src='./../images/gjyjj2.png')

                        .more.m-t10( @click="toPage('list')"
                            v-if="result.generalObj[currObj.onSeniority] && result.generalObj[currObj.onSeniority].organs.length > 10"
                        )
                            .btn 查看更多

                .clinic.p-t52(v-else)
                    template(
                        v-if="result.clinic[currObj.onSeniority] && result.clinic[currObj.onSeniority].details"
                    )
                        table.table-version-list.theme-table-version
                            colgroup
                                col(span="1", width="280")
                                col(span="1", width="300")
                                col(span="1")
                            thead
                                tr
                                    th(
                                        v-for="head in tablesHead.list",
                                        :key="head.value"
                                    ) {{ head.value }}
                            tbody(v-if="false")
                                tr
                                    td(:colspan="4")
                                        | none
                            tbody(v-else)
                                template(
                                    v-for="(item, index) in result.clinic[currObj.onSeniority].details"
                                )
                                    //- 一级  even
                                    tr(:class="[index % 2 ? 'odd' : 'even']")
                                        td.stair(:rowspan="item.line + 1") 
                                            | {{ index + 1 + "-" }} {{ item["name"] }}
                                    //- 二级 
                                    template(
                                        v-for="(item2, index2) in item.child"
                                    )
                                        tr(:class="[index%2 ? 'odd' : 'even']")
                                            td.second(
                                                :rowspan="item2.child.length + 1"
                                            )
                                                | {{ index + 1 + "-" }}{{ index2 + 1 + "-" }} {{ item2.name }}
                                        //- <!-- 三级 -->
                                        tr(:class="[index%2 ? 'odd' : 'even']"
                                            v-for="(item3, index3) in item2.child"
                                        )
                                            td.fullyName(
                                                v-for="(item4, key, index4) in item3",
                                                v-if="key === 'name'"
                                            )
                                                | {{ item4 }}
        .evaluate.m-t30
            .report
                p 临床试验机构评价填报
                .btn 
                    a(class="btn-ok" href="ctep-admin/#/") 点击进入
            .subject
                p 受试者评价
                .btn
                   a(class="btn-ok" href="ctep-admin/#/datafilling/probationarycustom") 点击进入

    template(v-if="result.workTrend.list && result.workTrend.list.length")
        .box-list-center.p-lr50.m-auto.page-w.m-t20
            .custom-title.p-lr50 工作动态
                .r(@click="toPage('work', {headline: '工作动态'})") 查看更多
        .dynamic-box.p-l40.page-w.m-auto
            vue-seamless-scroll.home_main_box_warp(
                :data="listData",
                :class-option="classOption",
                navigation="true"
            )
                span.left-arrow(slot="left-switch") 
                    .icon.el-icon-arrow-left
                span.right-arrow(slot="right-switch") 
                    .icon.el-icon-arrow-right
                //- ul(class="ul-item")
                //-     li( class="li-item" v-for="(item, index) in listData" :key="index") {{ item }}
                ul.ul-item
                    li.cursor(v-for="(item, i) in result.workTrend.list", :key="i" @click="toPage('details', {...item, headline: '工作动态'})")
                        p {{ formatTimeFn(item.sendTime) }}
                        p {{ item.title }}
                        p(v-html="item.description")

    .box-list-center.m-auto.page-w.p-lr50(v-if="result.newsOverview.length")
        .custom-title 新闻概览
            .r.pa(@click="toPage('work', {headline: '新闻概览'})") 查看更多
        .journalism-list-box
            slider.custom-slider(ref="slider", :options="options")
                slideritem(
                    v-for="(item, index) in result.newsOverview",
                    :key="index"
                )
                    ul
                        li.cursor(v-if="item[0]" @click="toPage('details', {...item[0], headline: '新闻概览'})")
                            .tags-box(v-if="item[0].tags") {{ item[0].tags }}
                            .tags-box-none(v-else)
                            b {{ item[0].title }}
                            p {{ formatTimeFn(item[0].sendTime) }}
                            .img-box.m-t15(v-if="formattingImg(item[0].image)")
                                img(:src="formattingImg(item[0].image)" :ref="'image_0'" @load="handleImageLoad($event, 0)")
                        li.cursor(v-if="item[1]" @click="toPage('details', {...item[1], headline: '新闻概览'})")
                            .img-box.m-t15(v-if="formattingImg(item[1].image)")
                                img(:src="formattingImg(item[1].image)" :ref="'image_1'" @load="handleImageLoad($event, 1)")
                            .tags-box(v-if='item[1].tags') {{ item[1].tags }}
                            .tags-box-none(v-else)
                            b {{ item[1].title }}
                            p {{ formatTimeFn(item[1].sendTime) }}

                        li.cursor(v-if="item[2]" @click="toPage('details', {...item[2],  headline: '新闻概览'})")
                            .tags-box(v-if='item[2].tags') {{ item[2].tags }}
                            .tags-box-none(v-else)
                            b {{ item[2].title }}
                            p {{ formatTimeFn(item[2].sendTime) }}
                            .img-box.m-t15(v-if="formattingImg(item[2].image)")
                                img(:src="formattingImg(item[2].image)" :ref="'image_2'" @load="handleImageLoad($event, 2)")

    //- div
    //-      <el-carousel>
    //-         <el-carousel-item v-for="item in imgwrap" :key="item.url">
    //-             <img :src="item.url"/>
    //-         </el-carousel-item>
    //-         </el-carousel>
</template>
<script>
import Navs from "./../../components/nav.vue";
import chinaJson from "./../../assets/chinaChange.json";
import * as echarts from "echarts";
import VueSeamlessScroll from "vue-seamless-scroll";
import { slider, slideritem } from "vue-concise-slider";
import Utils from "../../utils/index.js";
import {mixin} from './../mixin.js';
export default {
    mixins: [mixin],
    data() {
        return {
            loadingObj: {
                pageLoading: true,
            },
            options: {
                currentPage: 0,
            },
            someList: [
                {
                    html: "slide1",
                },
                {
                    html: "slide2",
                },
                {
                    html: "slide3",
                },
            ],

            listData: [1, 2, 3, 4, 5, 1003],
            classOption: {
                step: 1,
                limitMoveNum: false,
                switchSingleStep: 469,
                direction: 3,
                navigation: true,
                //   navigation: false,
                autoPlay: false,
            },
            tabList: [],
            currObj: {
                onSeniority: "trading",
                // Math.max.apply(null,[12,3,2,323,33]);
                visualMapMax: 100
                
            },
            tablesHead: {
                list: [
                    {
                        value: "一级指标",
                        key: "stair",
                    },
                    {
                        value: "二级指标",
                        key: "second",
                    },
                    {
                        value: "三级指标",
                        key: "fully",
                        

                    },
                ],
            },

            result: {
                banner: [],
                generalObj: {},
                generals: [
                    {
                        hospital_name:
                            "临床试验机构评价启动大会暨数据共享协议签",
                        grade: 90,
                    },
                ],
                workTrend: {},
                newsOverview: [],

                clinic: {
                    trading: [],
                },
                mapList: []
            },
        };
    },
    components: {
        Navs,
        VueSeamlessScroll,
        slider,
        slideritem,
    },
    computed: {
        optionSwitch1() {
            return {
                direction: 3,
                step: 3,
                limitMoveNum: 4,
                singleWidth: 380,
            };
        },
    },
    watch: {
        'result.mapList'(v) {
            const foundItem = v.find(item => item.name === '南海诸岛');
            if (!foundItem) {
                v.push({
                    name: "南海诸岛",
                    value: 0
                })
            }
            v.forEach((k)=>{
                let colorStr= k.name=="南海诸岛"?"#004B43":"white"
                k["itemStyle"]={
                    borderColor: colorStr,
                    // borderWidth: 1,
                };
            });
        },
    },
    methods: {
        handleImageLoad(event, index) {
            const img = event.target;
            this.scaleAndCropImage(img);
        },
        scaleAndCropImage(img) {
            const targetWidth = 370;
            const targetHeight = 320;

            const width = img.width;
            const height = img.height;

            if (width / height > targetWidth / targetHeight) {
                // 宽比高长，按高等比缩放图片
                const scaleFactor = targetHeight / height;
                const scaledWidth = width * scaleFactor;
                const offsetX = (scaledWidth - targetWidth) / 2;
                img.style.width = `${scaledWidth}px`;
                img.style.height = `${targetHeight}px`;
                img.style.objectPosition = `-${offsetX}px 0`;
            } else {
                // 宽比高短，按宽等比缩放图片
                const scaleFactor = targetWidth / width;
                const scaledHeight = height * scaleFactor;
                const offsetY = (scaledHeight - targetHeight) / 2;
                img.style.width = `${targetWidth}px`;
                img.style.height = `${scaledHeight}px`;
                img.style.objectPosition = `0 -${offsetY}px`;
            }
        },
        toPage(name, opt = {}) {
            let {id, headline} = opt;
            let query = {};
            id = id || ""
            headline = headline || ""
            // if (id) {
            //     query = {id,  headline};
            // }
            query = {id,  headline};
            this.$router.push({
                path: `/${name}`,
                query
            })
        },
        formattingImg(val) {
            let obj = JSON.parse(val);
            return obj[0].url;
        },
        formatTimeFn(val) {
            return Utils.formatTime(val, "YYYY-MM-DD");
        },
        tabListFn(val) {
            this.currObj.onSeniority = val;
            let { onSeniority } = this.currObj;
            let { generalObj } = this.result;

            if (!generalObj[onSeniority].organs.length && val !== "trading") {
                this.organization(val);
            } else {
                this.$nextTick(() => {
                    this.chinaEcharts();
                });
            }
        },
        chinaEcharts() {
            echarts.registerMap("china", chinaJson);
            let myChart = echarts.init(this.$refs.myEcharts);
            // 3.准备数据
            let option = {
                backgroundColor: "transparent",
                // tooltip: {
                //     trigger: "item",
                //     formatter: "{b}<br/>{c} ",
                // },

                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(0, 0, 0, 0.8)",
                    borderColor: "rgba(0, 0, 0, 0.8)",
                    axisPointer: {
                        type: "line",
                        lineStyle: {
                            color: "red",
                        },
                    },
                    formatter: (info) => {
                        let {generalObj} = this.result;
                        let {onSeniority} = this.currObj;
                        let txt = `<div class="map-hover-box"><p>${info.name}</p>`;
                        if (generalObj[onSeniority] && generalObj[onSeniority].provinceMap) {
                            let dataObj = (generalObj[onSeniority].provinceMap || {})[info.name]; 
                            let keysArray = (dataObj || []).slice(0, 10);
                            if (keysArray.length > 0) {
                                txt+= '<p>参与机构<span class="sign—colors">'+keysArray.length+'</span>家</p><p class="sign—colors">排名前 10 机构</p>';
                                txt+= '<ul>'
                                keysArray.forEach((n, i) => {
                                    let str = `<li><span>${i + 1}</span>${n.organName}</li>`;
                                    txt += str
                                });
                                txt+= '</ul>';
                            }
                        }
                        let infoHtml = txt+'<div>';
                        return infoHtml;
                    },
                },
                // 1)//加上这个就可以实现多种颜色的功能
                
                visualMap: {
                    min: 0,
                    max: this.currObj.visualMapMax,
                    // text: ["0", "100"],
                    text: ["家", ""],
                    calculable: true,
                    seriesIndex: [0], //这个对应的是series的数组下标
                    inRange: {
                        color: ["#C4DAD7", "#004B43"],
                    },
                    left: 20,
                    bottom: 30,
                    orient: 'horizontal',
                    type: 'continuous'
                },
                //series就是地图上的数据（去掉就没有数据了）
                series: [
                    {
                        type: "map",
                        map: "china",
                        geoIndex: 0,
                        zoom: 1.16,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        roam: false,
                        animation: false,
                        data: this.result.mapList,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },

        getNodeId(list, newNodeId = []) {
            for (let i in list) {
                newNodeId.push(list[i]);
                if (list[i].child) {
                    this.getNodeId(list[i].child, newNodeId);
                }
            }
            return newNodeId;
        },

        getListRelease() {
            let params = {
                year: 2023,
                province: "",
                organId: null
            };
            this.axios
                .post(
                    "/ctepapi/admin-api/eval/publish-rank/open/list",
                    params,
                    { headers: { "Content-Type": "application/json" } }
                )
                .then((resp) => {
                    let { errno, errmsg, data } = resp.data;
                    if (errno * 1 !== 0) {
                        //tab
                        this.tabList = data.map((n) => {
                            return {
                                name: n.name,
                                val: n.category || "trading",
                            };
                        });

                        let generalObj = {};
                        data.forEach((n, index) => {
                            generalObj[n.category || "trading"] = n;
                        });
                        // this.chinaEcharts();
                        this.result.generalObj = generalObj;
                    }
                });
        },

        getBanner() {
            this.axios
                .post("/ctepapi/admin-api/system/article-open/banner/list")
                .then((resp) => {
                    let { errno, errmsg, data } = resp.data;
                    if (errno * 1 !== 0) {
                        this.result.banner = data;
                    }
                });
        },
        arrChange(num, arr) {
            const newArr = [];
            while (arr.length > 0) {
                newArr.push(arr.splice(0, num));
            }
            return newArr;
        },
        // 工作动态
        getWorkTrend() {
            let params = {
                category: "job_news",
            };
            this.axios
                .post(
                    "/ctepapi/admin-api/system/article-open/news/page",
                    params,
                    { headers: { "Content-Type": "application/json" } }
                )
                .then((resp) => {
                    let { errno, errmsg, data } = resp.data;
                    if (errno * 1 !== 0) {
                        this.result.workTrend = data;
                    }
                });
        },
        // 新闻概览
        getindustryNews() {
            let params = {
                category: "industry_news",
            };
            this.axios
                .post(
                    "/ctepapi/admin-api/system/article-open/news/page",
                    params,
                    { headers: { "Content-Type": "application/json" } }
                )
                .then((resp) => {
                    let { errno, errmsg, data } = resp.data;
                    if (errno * 1 !== 0) {
                        let { list } = data;
                        let copyObj = this.arrChange(3, list);
                        this.result.newsOverview = copyObj;
                    }
                });
        },
        // /ctepapi/admin-api/eval/index-system/get-structure
        organization(category) {
            this.axios
                .get("/ctepapi/admin-api/eval/index-system/get-structure", {
                    params: { category },
                })
                .then((resp) => {
                    let { errno, errmsg, data } = resp.data;
                    if (errno * 1 !== 0) {
                        
                        let arr = [];
                        arr = data.details.map((n) => {
                            return {
                                ...n,
                                line: this.getNodeId(n.child).length,
                            };
                        });
                        data.details = arr;
                        this.result.clinic[category] = data;
                        this.$forceUpdate();
                    }
                });
        },
       
        async info() {
            await this._getChinaEcharts();
            this.getListRelease();
            this.getBanner();
            this.getWorkTrend();
            this.getindustryNews();
            this.chinaEcharts();
        },
    },
    mounted() {
        this.info();
        this.loadingObj.pageLoading = false;
    },
    destroyed() {},
};
</script>
<style>
.el-carousel__item img {
    margin: 0;
    width: 100%;
}
.el-carousel__container {
    position: relative;
    /* height: 544px; */
}
.slider-pagination .slider-pagination-bullet {
    background: #b3c9c7 !important;
}
.slider-pagination .slider-pagination-bullet-active {
    background: #004b43 !important;
}
</style>
<style lang="sass" scoped>
.home_main_box
    .table-version-list
        th
            th 
                padding: 12px !important
    .nodata
        font-size: 14px
        text-align: center
    .custom-title
        color: #004B43
        font-size: 24px
        font-weight: 500
        background: url('./../images/btbg.png') no-repeat 0px 32px
        background-size: 180px
        padding: 20px 0 20px 30px
        .r

            font-size: 14px
            font-family: PingFangSC-Regular, PingFang SC
            font-weight: 400
            color: #004B43
            background: url('./../images/gdimg.png') no-repeat right center
            background-size: 18px
            padding-right: 22px
            display: inline-block
            float: right
            cursor: pointer
            position: relative
            top: 18px
            // top: 5px
            &.pa
                top: 28px
        // padding-bottom: 5rem;
        // background-color: #f6f6f6;

    .banner
        overflow: hidden
        height: 466px
        img
            height: 100%
    
    .tags-box
        display: inline-block
        background: #F0D478
        border-radius: 3px
        font-size: 12px
        color: #004B43
        padding: 4px 12px
        height: 25px
    .tags-box-none
        height: 25px
    .list-box
        position: relative
        background: #f6fefd
        border-radius: 6px
        //overflow: hidden
        margin-top: 20px
    .more
        text-align: center
    .box-list-center

    .box-list
        .tabs
            position: absolute
            top: 0
            right: 0
            border-radius: 6px
            // border-top-right-radius: 6px
            overflow: hidden
            width: 50%
            display: flex
            li
                white-space: nowrap
                flex: 1
                text-align: center
                display: inline-block
                padding: 26px 0
                color: #004B43
                font-weight: 400
                
                font-size: 16px
                background: #D6FAF6
                border-left: #fff 1px solid
                line-height: 0
                &.on
                    color: #FFE6A7
                    background: #004B43

        .detail-list
            background: #f6fefd
            display: flex
            .l
                position: relative
                flex: 1
                height: 500px
                .myEcharts
                
                .descr
                    position: absolute
                    bottom: 14px
                    left: 25px
                    font-size: 12px
                    color: #7b7b7b
            .r
                padding-top: 66px
                flex: 1
                li
                    font-family: PingFangSC-Regular, PingFang SC
                    font-weight: 400
                    // padding-bottom: 15px
                    padding: 0 20px 15px
                    color: #4A4A4A
                    display: flex
                    font-size: 14px

                    &:hover
                        color: #004B43
                    span
                        &:first-child
                            width: 15px
                            margin-right: 10px
                            font-family: DIN-Bold, DIN
                            font-weight: bold
                        &:nth-child(2)
                            flex: 1
                        &:last-child
                            color: #313A46
                            width: 45px
                    &:nth-child(1)
                        span
                            &:first-child
                                background: url(./../images/top1.png) no-repeat center center
                                color: #ff000000
                                background-size: 15px

                    &:nth-child(2)
                        span
                            &:first-child
                                background: url(./../images/top2.png) no-repeat center center
                                background-size: 15px
                                color: #ff000000
                    &:nth-child(3)
                        span
                            &:first-child
                                background: url(./../images/top3.png) no-repeat center center
                                background-size: 15px
                                color: #ff000000

        .evaluate
            display: flex
            color: #fff
            
            .report,.subject
                background: url('./../images/tbrk.png') no-repeat center center
                background-size: cover
                padding: 34px
                flex: 1
                border-radius: 6px
                overflow: hidden
                height: 160px
                p
                    font-size: 40px
                    line-height: 40px
                    padding-bottom: 18px
            .subject
                margin-left: 20px
                background: url('./../images/glpt.png') no-repeat center center
                background-size: cover
            .btn-ok
                color: #004b43
    .home_main_box_warp
        width: 100%
        height: 320px
        margin: 0 auto
        overflow: hidden
    .left-arrow,.right-arrow
        font-size: 30px
        color: #F0D478
        position: absolute !important
        top: -220px
        cursor: pointer
        .icon
            font-weight: bold !important
    .left-arrow
        // right: -1140px !important
        transform: translate(3700%, 0)
    .right-arrow
        right: 88px !important
    .disabled
        .left-arrow, .right-arrow
            color: #B8B8B8

    .dynamic-box
        background: #f5fdfc
        position: relative
        height: 410px
        padding-top: 80px
        overflow: hidden
        background: linear-gradient(90deg, #F4FDFC 50%, #ffffff 0%, #E9FCF9 50%)
        // padding-left: 20px
        // border: 1px solid red
        ul
            padding: 0px 50px 30px 0px
            display: flex
            li
                width: 450px
                padding: 40px 25px
                background: #FFFFFF
                box-shadow: 0px 13px 10px 0px rgba(0,0,0,0.07)
                border-radius: 4px
                border-bottom: 3px solid #F0D478
                // margin-right: 15px
                margin-left: 16px

                p
                    word-break: break-all
                    &:first-child
                        font-size: 16px
                        color: #004B43
                        font-family: ArialMT
                        
                        
                    &:nth-child(2)
                        overflow: hidden
                        text-overflow: ellipsis
                        display: -webkit-box
                        -webkit-box-orient: vertical
                        -webkit-line-clamp: 2
                        font-size: 24px
                        padding-top: 15px
                        font-weight: 500
                        color: #000000
                        line-height: 28px
                        font-family: PingFangSC-Medium, PingFang SC
                        // height: 73px
                        
                    &:last-child
                        overflow: hidden
                        text-overflow: ellipsis
                        display: -webkit-box
                        -webkit-box-orient: vertical
                        -webkit-line-clamp: 3
                        color: #666666
                        padding-top: 28px
                        font-size: 18px
                        font-family: PingFangSC-Regular, PingFang SC
    .journalism-list-box
        padding-bottom: 25px
        ul
            overflow: hidden
            padding-bottom: 35px
            text-align: left
            width: 100%

        li
            word-break: break-all
            padding: 0 15px
            display: block
            float: left
            width: 33.3333333%
            &:first-child
                margin-right: 0
            .img-box
                text-align: center
                border-radius: 5px
                overflow: hidden
                width: 100%
                min-height: 250px
                margin-top: 30px
            img
                width: 100%
                border-radius: 5px
                height: 320px
                object-fit: cover

            b
                font-size: 24px
                min-height: 100px
                color: #333333
                padding-top: 16px
                display: block
                white-space: normal
                display: -webkit-box
                -webkit-box-orient: vertical
                -webkit-line-clamp: 3
                overflow: hidden
                -webkit-box-pack: start
                line-height: 1.2
                text-overflow: ellipsis

            p
                word-break: break-all
                color: #9b9b9b
                font-size: 14px
                padding-top: 12px
                font-family: ArialMT
            &:first-child
                .tags-box
                    color: #fff
                    background: #004B43

            &:nth-child(2)
                .tags-box
                    color: #fff
                    background: #858589
    .custom-slider
        white-space: normal
    .theme-table-version
        // border-top: 4px solid 
        margin-top: 4px

        thead
            tr
                th
                    border:1px solid #fff
                    padding: 8px 10px !important

        td
            border:1px solid #fff
            padding: 12px 15px !important
        .fullyName
            color: #6A707E
</style>